<template>
	<view>
		<view class="container">
			<view class="flex-box flex-center areas">
				<view class="flex-box inputbox">
					<image src="/static/icon/icon_search-g.png" class="icon_search"></image>
					<input @input="keywordFun" @confirm='doSearch' confirm-type="search" class="areainput flex1" placeholder="请输入你要查找的楼盘"
						placeholder-class="colc"></input>
				</view>
			</view>
			<template v-if="showType == 1">
				<view v-if="hotData.length > 0">
					<view class="flex-box flex-between histop">
						<view class="fs30">热门搜索</view>
					</view>
					<view class="histlist flex-box flex-wrap" v-if="hotData.length>0">
						<view @tap="clickThis" :data-name="item.name" class="hotitem" v-for="(item, index) in hotData">
							{{ item.name }}
						</view>
					</view>
				</view>

				<view v-if="historyData.length > 0">
					<view class="flex-box flex-between histop">
						<view class="fs30">搜索历史</view>
						<view class="flex-box clear_hist" @tap="delHistoryData">
							<image src="/static/icon/c-icon_delete.png" class="c-icon_delete"></image>
							<view>清空历史</view>
						</view>
					</view>
					<view class="histlist flex-box flex-wrap">
						<view @tap="clickThis" :data-name="item.name" v-for="(item, index) in historyData" class="hotitem">
							{{ item.name }}</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="histop fs30 fwb">搜索“<text class="blue">{{ keyword }}</text>”</view>
				<view v-if="houseList.total > 0" class="houselist mlr30 mt30">
					
					<view class="houseitem flex" v-for="(item, index) in houseList.data" @click="goToDe(item)">
						<view class="houseimg">
							<u--image :showLoading="true" :lazy-load="true" :src="item.image_text" radius="10rpx"
								width="240rpx" height="190rpx" mode="aspectFill"></u--image>
						</view>
						<view class="flex-grow-1">
							<view class="flex-box">
								<view class="housename m-ellipsis flex-grow-1 fwb">{{item.name}}</view>
								<view class="sale_type1">{{ item.sale_state_text }}</view>
							</view>
							<!-- 新房 -->
							<block v-if="item.house_type_id==16">
							
								<view class="flex-box" style="align-items:flex-start;">
									<view class="infoleft">参考均价</view>
									<view class="infoprice">
										<view style="color:#f8532f;margin-left:10rpx;" v-for="(item,index) in item.other_housing_prices" :key="index">{{item.value+item.name}}</view>
									</view>
								</view>
								<view class="flex-box">
									<view class="housename m-ellipsis flex-grow-1" style="font-size:26rpx;color:#666;">建筑面积 
										<text style="color:#f8532f;margin-left:10rpx;"> {{ item.min_space }}㎡</text>
									</view>
								</view>
								<view class="flex-box">
									<view class="housename m-ellipsis flex-grow-1" style="font-size:26rpx;color:#666;">楼盘地址 
										<text style="margin-left:10rpx;"> {{ item.region + item.addr }}</text>
									</view>
								</view>
							</block>
							
							<block v-else>
								
								<view class="area-size">
									
									<text class="pr20">{{ item.list_labels?item.list_labels:'' }}</text>
									
									<text>建面{{ item.min_space }}㎡</text>
								</view>
								<view class="targetbox flex">
									<view class="targetitem" v-for="(targets, index1) in item.house_tag_ids_text_arr" :key="index1">
										{{targets}}
									</view>
									<view v-if="item.rank_json_text" class="number_one">
										<image src="/static/icon/icon_reward.png" class="icon_reward"></image>
										<view>{{ item.rank_json_text }}</view>
									</view>
								</view>
							
							</block>
							
							<view class="housecost fwb">
								<!-- 二手房 -->
								<text class="pr20" v-if="item.house_type_id==1">{{ item.price }}万</text>
								{{ item.first_price_msg ? item.first_price_msg : '' }}
								<text class="junjia" v-if="item.house_type_id==1">{{item.unit_price}}元/平</text>
								<!-- 商铺 -->
								<text class="pr20" v-if="item.house_type_id==18">{{ item.price }}万</text>
								<text class="junjia" v-if="item.house_type_id!=1&&item.house_type_id!=16">{{item.unit_price}}元/平(参考均价)</text>
							</view>
							
						</view>
					</view>
					
					<u-loadmore :status="loadStatus" fontSize="24" line loading-text="努力加载中" loadmore-text="轻轻上拉"
						nomore-text="没有更多了" />
				</view>
				<template v-else>
					<u-empty mode="data" text="暂未筛选到相关房源" textSize="24" icon="/static/images/none-data.png">
					</u-empty>
				</template>
			</template>
		</view>
	</view>
</template>

<script>
	const app = getApp();

	const functions = require('../../../utils/functions.js');
	export default {
		data() {
			return {
				loadStatus: 'loadmore', //加载状态
				jump_type: 1,
				hotData: [],
				historyData: [],
				showType: 1,

				//显示:1=，2=楼盘列表页
				keyword: '',

				// 房源列表
				houseList: {
					total: 0,
					current_page: 0,
					last_page: 1,
					data: []
				},

				// 已选中的搜索条件
				searchCheckJson: {
					keyword: '' //搜索关键词
				},

				now_city: '',

				value: {
					key: '',
					is_active: '',
					value: ''
				}
			}
		},
		onLoad: function(options) {
			this.jump_type = options.jump_type ? options.jump_type : 1;
			this.initData();
		},
		onPullDownRefresh: function() {
			uni.showNavigationBarLoading(); //在标题栏中显示加载

			var that = this; //模拟加载

			setTimeout(function() {
				that.initData();
				uni.stopPullDownRefresh(); //停止下拉刷新
			}, 1500);
		},
		onReachBottom: function() {
			if (this.showType == 1 || this.houseList.current_page >= this.houseList.last_page) {
				this.loadStatus = 'nomore';
				return false;
			} else {
				this.getHouseList();
			}
		},
		methods: {
			clickThis(e) {
				var historyData = this.historyData;

				for (let index = 0; index < historyData.length; index++) {
					const element = historyData[index];

					if (element.name == e.currentTarget.dataset.name) {
						historyData.splice(index, 1);
					}
				}

				historyData.splice(0, 0, {
					name: e.currentTarget.dataset.name
				});
				this.historyData = historyData
				uni.setStorageSync('history_str', JSON.stringify(historyData));
				var param = {
					keyword: e.currentTarget.dataset.name
				};
				app.globalData.pagesParam = param;
				app.globalData.is_need_page_change = true;
				console.log(this.jump_type)
				if (this.jump_type == 1) {
					uni.navigateTo({
						url: '/pages/home/building_list/building_list'
					});
				} else {
					uni.navigateBack();
				}
			},

			keywordFun(e) {
				if (e.detail.value) {
					this.showType = 2;
					this.keyword = e.detail.value
					if(this.jump_type==1){
						this.doSearch(e);
					}
				} else {
					this.showType = 1;
					this.keyword = e.detail.value
				}
			},

			// 开始搜索
			doSearch(e) {
				var historyData = this.historyData;

				for (let index = 0; index < historyData.length; index++) {
					const element = historyData[index];

					if (element.name == e.detail.value) {
						historyData.splice(index, 1);
					}
				}

				historyData.splice(0, 0, {
					name: e.detail.value
				});
				this.historyData = historyData
				uni.setStorageSync('history_str', JSON.stringify(historyData));
				this.showType = 2;
				this.houseList = {
					total: 0,
					current_page: 0,
					last_page: 1,
					data: []
				};
				this.searchCheckJson.keyword = e.detail.value
				if(this.jump_type==1){
					this.getHouseList();
				}else{
					var param = {
						keyword: e.detail.value
					};
					app.globalData.pagesParam = param;
					app.globalData.is_need_page_change = true;
					uni.navigateBack();
				}
			},

			delHistoryData: function() {
				this.historyData = []
				uni.setStorageSync('history_str', '');
			},
			
			goToDe(event){
				console.log(event);
				console.log('详情id:'+event.id);
				console.log('新房:'+event.house_type_id);
				
				if (event.house_type_id==16) {
					//新房 = 16
					uni.navigateTo({
						url: '/pages/house/building_detail_news/building_detail_news?id='+event.id
					});
				} else if(event.house_type_id==1) {
					// 二手房 = 1
					uni.navigateTo({
						url: '/pages/house/building_detail/building_detail?id='+event.id
					});
				}else{
					// 其他
					uni.navigateTo({
						url: '/pages/house/building_detail/building_detail?id='+event.id
					});
				}
				
			},
			
			// 获取房源列表信息
			getHouseList: function() {
				var that = this;
				var json = {
					city: that.now_city
				};
				json.page = Number(that.houseList.current_page) + 1;
				Object.assign(json, this.searchCheckJson);

				if (json.page > 1 && that.houseList.current_page >= that.houseList.last_page) {
					functions.toast('已加载到底部了');
					this.loadStatus = 'nomore';
					return false;
				}
				this.loadStatus = 'loading';
				functions.getAjaxList(that, '/api/xiluhouse/House/house_list', json, function(res) {
					var houseList = res.data;
					console.log(res.data);

					if (json.page > 1) {
						var now_houseList_data = that.houseList.data || [];
						var now_houseList_data = now_houseList_data.concat(houseList.data);
						houseList.data = now_houseList_data;
					}

					that.houseList = houseList
				});
			},

			// 获取所有可下拉刷新更新的数据
			initData: function() {
				var that = this;
				var now_city = uni.getStorageSync('now_city');
				this.now_city=now_city ? now_city : '上海市'
				functions.getAjaxData(
					'/api/xiluhouse/universal/hot_search_data', {
						city: that.now_city
					},
					function(res) {
						that.hotData=res.data
					}
				); // 获取存储的历史搜索记录

				var str = uni.getStorageSync('history_str') || '';

				if (str) {
					var arr = JSON.parse(str);
					that.historyData= arr
				}

				if (this.keyword) {
					this.showType= 2
					this.houseList= {
						total: 0,
						current_page: 0,
						last_page: 1,
						data: []
					}
					this.searchCheckJson.keyword=e.detail.value
					this.getHouseList();
				} else {
					this.showType=1
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.histlist .hotitem {
		padding: 0 14rpx;
		font-size: 24rpx;
		color: #898989;
		background: #f6f7fa;
		border-radius: 5rpx;
		margin-right: 30rpx;
		height: 45rpx;
		line-height: 45rpx;
		margin-bottom: 20rpx;
	}

	.tec1 {
		padding:0 8rpx;
		height: 34rpx;
		background: rgba(0, 145, 255, .2);
		border-radius: 2rpx;
		color: var(--blue);
		font-size: var(--fs22);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tec2 {
		padding:0 8rpx;
		height: 34rpx;
		border: 1rpx solid var(--blue);
		border-radius: 2rpx;
		color: var(--blue);
		font-size: var(--fs22);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10rpx;
	}

	.inputbox {
		width: 690rpx;
		height: 70rpx;
		border-radius: 50rpx;
		background-color: rgba(255, 255, 255, 1);
		color: #010101;
		padding: 0 30rpx;
		box-shadow: 0px 4rpx 30rpx rgba(184, 189, 202, 0.3);
	}

	.icon_search {
		width: 30rpx;
		height: 30rpx;
		margin-right: 20rpx;
	}

	.inputbox input {
		color: #010101;
		font-size: var(--fs24);
	}

	.areas {
		padding: 25rpx 30rpx;
		height: 120rpx;
	}

	.c-icon_delete {
		width: 26rpx;
		height: 26rpx;
		margin-right: 10rpx;
	}

	.clear_hist {
		font-size: var(--fs24);
		color: #898989;
	}

	.histlist {
		padding: 0 30rpx;
		color: #898989;
		font-size: var(--fs26);
		line-height: 60rpx;
	}

	.histop {
		padding: 20rpx 30rpx 10rpx;
	}

	.target {
		line-height: 45rpx;
		padding: 0 14rpx;
		background-color: #F6F7FA;
		margin-right: 30rpx;
		margin-bottom: 20rpx;
	}

	.res_list {
		border-top: 1rpx solid #F4F3F3;
	}

	.res_item {
		border-bottom: 1rpx solid #F4F3F3;
	}
	

	.houselist .houseitem {
		position: relative;
		padding-top: 30rpx;

		.targets {
			position: absolute;
			top: 15rpx;
			left: 15rpx;
			z-index:9;
		}

		.targets view {
			padding: 2rpx 4rpx;
			color: var(--white);
			font-size: var(--fs16);
			margin-right: 10rpx;
			border-radius: 2rpx;
		}

		.targets .tar1 {
			background-color: #FF7B40;
		}

		.targets .tar2 {
			background-color: #FE6075;
		}

		.targets .tar3 {
			background-color: var(--blue);
		}
	}

	.houselist .houseitem .houseimg {
		width: 240rpx;
		height: 190rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.houselist .housename {
		font-size: var(--fs30);
		padding-bottom: 10rpx;
	}

	.houselist .area-size {
		font-size: var(--fs24);
		color: #898989;
	}

	.houselist .targetbox {
		padding: 14rpx 0 0;
		white-space: nowrap;
		overflow-x: scroll;
		width: 100%;
	}

	.houselist .targetitem {
		padding: 2rpx 4rpx;
		background: #cce9ff;
		font-size: var(--fs18);
		color: var(--normal);
		border-radius: 2rpx;
		margin-right: 10rpx;
		margin-bottom: 12rpx;
	}

	.houselist .housecost {
		color: var(--red);
		font-size: var(--fs24);
	}

	.houselist .housecost text {
		font-size: var(--fs34);
	}

	.houselist .housecost .junjia{
		font-size: var(--fs24);
		color: #999;
	}

	.houselist .event {
		padding-top: 11rpx;
		font-size: var(--fs18);
		color: #898989;
	}

	.houselist .event .bao {
		width: 26rpx;
		text-align: center;
		line-height: 26rpx;
		font-size: var(--fs18);
		height: 26rpx;
		border-radius: 5rpx;
		background: linear-gradient(180deg, #00C4FF, var(--normal));
		color: var(--white);
		margin-right: 10rpx;
	}

	.houselist .event .dong {
		width: 26rpx;
		text-align: center;
		line-height: 26rpx;
		font-size: var(--fs18);
		height: 26rpx;
		border-radius: 5rpx;
		background: linear-gradient(270deg, #FF6635, #FFB45C);
		color: var(--white);
		margin-right: 10rpx;
	}

	.houselist .event .hot {
		width: 26rpx;
		text-align: center;
		line-height: 26rpx;
		font-size: var(--fs18);
		height: 26rpx;
		border-radius: 5rpx;
		background: linear-gradient(270deg, #ff5232 0%, #ff6635 100%);
		color: var(--white);
		margin-right: 10rpx;
	}

	
	
</style>
